<template>
    <view>
        <view class="navbar">
          <!-- #ifdef MP-WEIXIN -->
          <navbar title="点餐"></navbar>
          <!-- #endif -->
          <!-- #ifdef MP-ALIPAY -->
          <navbar title="点餐" bgColor="#000" fontColor="#fff"></navbar>
          <!-- #endif -->
        </view>
        <view class="sticky-tabs" :style="{ top: navbarHeight + 'rpx' }">
            <u-search
                class="search-box"
                placeholder="请输入菜品名称"
                height="60rpx"
                margin="0 40rpx"
                shape="round"
                searchIconSize="40"
                :showAction="false"
                :focus="true"
                v-model:value="searchValue"
                @clear="searchClear"
                @change="getGoods"
            ></u-search>
        </view>
        <view class="goods-wrapper" :style="{ height: scrollH - stickyHeight + 'rpx' }">
            <!-- 商品组件 -->
<!--            <good-list class="good-comp" ref="goodComp" :list="goods" :showCls="false"></good-list>-->
            <food-good-list class="good-comp" ref="goodComp" :list="category" :showCls="false"></food-good-list>
            <view :style="{ height: cartHeight + 'rpx', width: '100%' }"> </view>
        </view>
        <cart ref="cart"></cart>
    </view>
</template>
<script>
import { mapState, mapGetters } from "vuex"; //引入mapState, mapGetters
import { apiGoods } from "@/api/mock.js";
import PageApi from "@/api/page"
var getGoods = null;
export default {
    data() {
        return {
            searchValue: "",
            searchFocus: false,
          category: [], // 列表数据
        };
    },
    computed: {
        ...mapState({
            scrollH: (state) => state.scrollH,
            cartHeight: (state) => state.cartHeight,
            order_info: (state) => state.cart.order_info
        }),
        ...mapGetters({
            navbarHeight: "getNavbarHeight",
            stickyHeight: "getStickyHeight",
        }),
    },
    methods: {
        searchClear() {
            this.searchValue = "";
        },
        getGoods() {
            // 获取产品列表
          // const self = this
          PageApi.pageSearch({
            keyword: this.searchValue,
            sale_time: this.order_info.sale_time
          }).then(res=>{
            if(res.code == 200){
              let category = [{
                category_name: "COCO_SEARCH",
                category_no: "COCO_SEARCH",
                product: res.data
              }]
              this.category = category
            }
          })
        },
    },
};
</script>
<style lang="scss">
.sticky-tabs {
    z-index: 100;
    position: sticky;
    height: 120rpx;
    background-color: #fff;
    display: flex;
}
.goods-wrapper {
    background-color: #fff;
}
</style>
